[Rails]專案引入vue & 利用Attribute給 vue 資料

發表於 更新於 分類於 ，

我的開發環境：
Rails 5.1以上

引入webpacker和vue

先安裝web packer

Gemfile
1
gem 'webpacker', '~> 3.5'

$ bundle install
$ bundle exec rails webpacker:install

可以查看webpacker帶有什麼指令：
$ rails webpacker

比起npm我比較喜歡用yarn：
$ bundle exec webpacker:yarn_install
$ yarn install

有個指令可以直接安裝vue：
$ bundle exec webpacker:install:vue

利用Attribute給 vue 資料

先在contoller設定變數：

products_controller.rb
1
2
3
def index
  @products = Product.all
end

再到view裡面把資料帶入DOM：

index.html.erb
1
2
3
4
5
6
<% props = {
  products: @products
  }.to_json
%>

<div id="app" data="<%= props %>"></div>

接下來到vue的檔案application：

app/javascript/packs/application.js
1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = "#app"

  const props = JSON.parse($("#app")[0].getAttribute('data'))
  const app = new Vue({
    el: el,
    render: h => h(App, { props })
  })
})

最後到vue 的component：

app/javascript/app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
export default {
  props: ["products"],
  data: function () {
    return {
      message: "Hello Vue!"
    }
  },
  mounted: function () {
    console.log("products", products)
  }
}
</script>

mounted是vue生成完之後會執行的動做，可以參考vue lifecycle。
如果有console出東西就ok嘍！！

這個方式的優點十分明顯，可以省去製作API和串接的麻煩，但就是比較不彈性，真正要做到完全的前後端分離建議還是分成兩個專案，Rails寫API而Vue去做前端實現。

參考文章：
Passing Props to Vue in a Rails View